<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>用户列表</title>

    <!-- CSS -->
    <link rel="stylesheet" th:href="@{static/plugins/layui/css/layui.css}"/>
</head>
<body>

<div style="margin:10px;">

    <blockquote class="layui-elem-quote">
    <!-- 功能按钮 -->
    <div class="layui-btn-group">
        <button class="layui-btn layui-bg-blue" id="addInfo">新增</button>
        <button class="layui-btn layui-btn-danger" id="removeInfo">删除</button>
    </div>
    <div class="layui-inline">
        <div class="layui-form-mid layui-word-aux"> <span style="color: red"> （注：输入需要注释的内容...）</span></div>
    </div>
    </blockquote>

    <!-- 查询条件 -->
    <div class="layui-row">
        <form class="layui-form" id="formData">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="su01" placeholder="" autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">登录名</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="su05" placeholder="" autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">身份证号</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="su13" placeholder="" autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">注册时间</label>
                    <div class="layui-input-inline" style="width: 160px;">
                        <input type="text" name="startTime" id="startTime" readonly placeholder="-- 开始 --"
                               autocomplete="off" class="layui-input date">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 160px;">
                        <input type="text" name="endTime" id="endTime" readonly placeholder="-- 结束 --"
                               autocomplete="off" class="layui-input date">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit lay-filter="doSearchFilter"><i class="layui-icon">&#58901;</i>查询</button>
                    <button class="layui-btn layui-btn-normal layui-btn-radius layui-btn-danger" type="reset" >重置</button>
                </div>
            </div>
        </form>
    </div>


    <div class="layui-row">
        <table id="user_table" lay-filter="user_table_filter"></table>
    </div>

</div>

<!-- JS -->
<script type="text/javascript" th:src="@{static/plugins/layui/layui.js}"></script>
<script type="text/html" id="toolBar">
    <a class="layui-btn layui-btn-xs color-green" lay-event="role">角色</a>
    <a class="layui-btn layui-btn-xs color-green" lay-event="detail">明细</a>
    <a class="layui-btn layui-btn-xs color-green" lay-event="modify">修改</a>
    <a class="layui-btn layui-btn-xs color-green" lay-event="remove">删除</a>
</script>
<script type="text/html" id="toolBar1">
    {{# if(d.su20 == 1){ }}
    <span>启用</span>
    {{# } }}
    {{# if(d.su20 == 0){ }}
    <span>禁用</span>
    {{# } }}
</script>
<script th:inline="javascript">

    layui.use(['form', 'layer','table','laydate'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;

        //日期框渲染
        lay('.date').each(function () {
            laydate.render({
                elem: this,
                trigger: 'click',
                theme: 'grid',
                format: 'yyyy-MM-dd'
            });
        });

        table.render({
            elem:'#user_table',
            id:'user_table_id',
            url:'sysUser/getSysUsers',
            where:$('#formData').serializeArray(),//将查询条件表单内容序列化
            page:true,
            limit:10,
            cols:[
                [
                {type: 'checkbox', width: '5%'},
                {field: 'su01', title: '姓名', align: 'center', width: '15%'},
                {field: 'su05', title: '登录名', align: 'center', width: '15%'},
                {field: 'su02', title: '性别', align: 'center', width: '10%'},
                {field: 'su03', title: '年龄', align: 'center', width: '10%'},
                {field: 'su04', title: '出生日期', align: 'center', width: '15%'},
                {field: 'su20', title: '状态', align: 'center', width: '10%', templet: "#toolBar1"},
                {field: 'right', title: '操作', align: 'center', width: '20%', templet: "#toolBar"}
            ]
            ],
            height:500,
            skin: 'nob ', //表格风格
            even: false, //是否开启隔行背景
            done:function(res,curr,count){
                table.cache["currentPage"] = curr; //当前页
            }
        });

        //查询
        form.on('submit(doSearchFilter)', function(data){
            //判断输入时间是否正确
            var startTime = $('#startTime').val();
            var endTime = $('#endTime').val();
            if(endTime.length > 0 && startTime > endTime){
                layer.msg("开始时间不能大于结束时间",{icon:5,time:2000});
            }else{
                //重载table
                table.reload('user_table_id', {
                    where:data.field
                });
            }
            return false;
        });

        //监听工具条
        table.on('tool(user_table_filter)', function (obj) {
            var data = obj.data; //获得当前行数据
            if (obj.event === 'role') {
                layer.open({
                    type: 2,
                    id: 'roleLayer',
                    title: '角色',
                    shadeClose: false,
                    maxmin: false, //开启最大化最小化按钮
                    area: ['300px', '90%'],
                    content: 'toSysUserRole?su00=' + data.su00,
                    success: function(layero, index){
                    }
                });
            }else if (obj.event === 'detail') {
                layer.open({
                    type: 2,
                    id: 'detailLayer',
                    title: '明细',
                    shadeClose: false,
                    maxmin: false, //开启最大化最小化按钮
                    area: ['1100px', '90%'],
                    content: 'toSysUserDetail?su00=' + data.su00,
                    success: function(layero, index){
                    }
                });
            }else if (obj.event === 'modify') {
                layer.open({
                    type: 2,
                    id: 'modifyLayer',
                    title: '编辑',
                    shadeClose: false,
                    maxmin: false, //开启最大化最小化按钮
                    area: ['1100px', '90%'],
                    content: 'toSysUserMod?su00=' + data.su00,
                    success: function(layero, index){
                    }
                });
            } else if (obj.event === 'remove') {
                $.ajax({
                    url:'sysUser/removeSysUsers',
                    type: 'post',
                    data:{ids:data.su00},
                    dataType:'json',
                    success: function(data) {
                        if(data.code === 0){
                            layer.msg("OK",{icon:1,time:1000});
                            //重载table
                            table.reload('user_table_id', {
                                page: {
                                    // curr: 1
                                    curr: table.cache["currentPage"] //重载当前页
                                }
                            });
                        }else{
                            layer.msg('异常错误',{icon:5,time:1000});
                        }
                    }
                });
            }
        });

        //新增
        $('#addInfo').on('click', function () {
            layer.open({
                type: 2,
                id:'addInfoLayer',
                title: '新增',
                shadeClose: false,
                maxmin: false, //开启最大化最小化按钮
                area: ['1100px', '90%'],
                content: 'toSysUserAdd',
                success: function(layero, index){//打开弹出层后回调函数
                },
                end: function () { //关闭弹出层后回调函数
                }
            });
        });
        //删除（批量）
        $('#removeInfo').on('click', function () {
            var checkStatus = table.checkStatus('user_table_id');//选中行
            var rowData = checkStatus.data;//选中行数据
            /*<![CDATA[*/
            if(rowData.length < 1){
                layer.msg('请至少选择一条数据',{icon:5,time:2000});
            }else{
                //封装选中行 id
                var ids = [];
                $.each(rowData,function(i,obj){
                    ids.push(obj.su00);
                });
                layer.confirm('are you OK ?',{icon: 3, title:'提示'}, function (index) {
                    //ajax 调用后台
                    $.ajax({
                        url:'sysUser/removeSysUsers',
                        type: 'post',
                        data:{ids:ids.toString()},
                        dataType:'json',
                        success: function(data) {
                            if(data.code === 0){
                                layer.msg("OK",{icon:1,time:1000});
                                //重载table
                                table.reload('user_table_id', {
                                    page: {
                                        // curr: 1
                                        curr: table.cache["currentPage"] //重载当前页
                                    }
                                });
                            }else{
                                layer.msg('异常错误',{icon:5,time:1000});
                            }
                        }
                    });
                    layer.close(index);
                });
            }
            /*]]>*/
        });




    });
</script>

</body>
</html>